<template>
  <div>
    <input type="file" @change="handleImageUpload" />
    <div v-if="recognizedText">
      <p>识别的文字：</p>
      <pre class="box">{{ recognizedText }}</pre>
    </div>
  </div>
</template>
 
<script setup>
import Tesseract from "tesseract.js";
import {  ref } from "vue";
// 识别图片中的文字
// 图片文件
const recognizedText = ref("");
function handleImageUpload(event) {
  const imageFile = event.target.files[0];
  if (imageFile) {
    recognizeTextFromImage(imageFile);
  }
}
// eng(英文) / chi_sim(简体中文) / chi_tra(繁体中文) / eng+chi_sim(英文+简体中文) / (如果有多种语言用+连接即可)
async function recognizeTextFromImage(imageFile) {
  try {
    const worker = await Tesseract.createWorker("chi_sim", 1, {
      logger: (m) => {
        console.log(m);
        recognizedText.value += m.status;
      },
    });
    const {
      data: { text },
    } = await worker.recognize(imageFile);
    recognizedText.value = text;
    worker.terminate();
  } catch (error) {
    console.error(error);
    recognizedText.value = "识别失败了";
  }
}
</script>
<style scoped>
</style>